<template>
  <div class="edit">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    </el-breadcrumb>

    <div class=" goodlist animate__animated  animate__bounceInLeft  " >
      <!-- 第一个类名是容器的类名 第二个 animate__animated  为固定的类名 必须要加  第三个animate__backInLeft  是我们在动画库中 选择的效果-->
      <el-table :data="goodlist" id="posteditTable" style="width: 100%">
        <el-table-column prop="goodsId" label="商品Id" width="100">
        </el-table-column>
        <el-table-column prop="goodsName" label="商品名称" width="200">
        </el-table-column>
        <el-table-column prop="goodsPrice" label="商品价格 " width="150"> </el-table-column>
        <!-- <img src="prop.googsImg" alt="" > -->
        <!-- <el-table-column  label="商品图片"> 
          <img :src="img" alt="" width="120px">
        </el-table-column> -->
        <el-table-column prop="goodsIntro" label="商品简介"> </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleToUpdate(scope)"
              >编辑</el-button
            >
            <el-button type="danger" size="small" @click="handleToRemove(scope)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
   
   
    <!-- 分页 -->
    <!-- <el-pagination
      @current-change="handleChange"
      id="posteditPage"
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="8"
    >
    </el-pagination> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodlist: [],
      total: 0,
      imagelist: [],
    };
  },
  mounted() {
    this.imagelist = [];
    this.$axios
      .get("/api/store/getlist", {
        // params: { page: 1 },
      })
      .then((res) => {
        if (res.data.code == 0) {
          this.goodlist = res.data.infos;
          this.goodlist.forEach((item) => {
            this.imagelist.push(item.goodsImg);
          });
          this.total = res.data.count;
          //  console.log(this.imagelist);
        }
      })
      .catch(() => {});
  },
  methods: {
    // handleChange(nowpage) {  //分页点击
    //   this.$axios
    //     .get("/api/store/getlist", {
    //       params: { page: nowpage },
    //     })
    //     .then((res) => {
    //       if (res.data.code == 0) {
    //         this.goodlist = res.data.infos;
    //       }
    //     })
    //     .catch(() => {});
    // },
    handleToUpdate(scope) {
      //点击编辑
      var _id = scope.row.goodsId;
      this.$router.push("/admin/postupdate/" + _id);
    },
    handleToRemove(scope) {
      //点击删除
      var _id = scope.row.goodsId;
      var index = scope.$index;

      this.$confirm("此操作将永久删除该文件，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get("/api/store/remove/", { params: { goodsId: _id } })
            .then((res) => {
              if (res.data.code == 0) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
                this.goodlist.splice(index, 1);
              } else {
                this.$message({
                  message: "删除失败",
                  type: "err",
                });
              }
            })
            .cath(() => {});
        })
        .catch(() => {});
    }, //点击删除
  },
};
</script>

<style  scoped>
.has-gutter .el-main[data-v-54c38a05] {
  line-height: 40px;
}
.el-table th {
  height: 20px;
  margin: 30px auto;
}
.has-gutter tr {
  height: 50px;
}
#posteditTable {
  margin-top: 20px;
  width: 60%;
  padding: 20px;
  text-align: center;
  align-items: center;
}
.edit {
  opacity: 0.8;
}
#posteditPage {
  margin-top: 20px;
  position: absolute;
  left:50%;
  bottom: 8%;
}
.goodlist{
  position: absolute;
  left: 25%;
  top: 12%;
  width:60%; 
  animation-duration:1s  
}

</style>